<template>
  <el-dialog v-model="show"
             title="添加菜单"
             top="20px"
             width="750"
             :draggable="true"
             :close-on-click-modal="false">
    <el-alert type="info" show-icon :closable="false" class="m-b-10">
      <template #default>
        <el-row class="m-b-5">1.如果为目录或菜单，则编码起名时为驼峰类型的标识，必须全局唯一，不允许重复，如:systemUser、systemMenu</el-row>
        <el-row class="m-b-5">2.如果为功能项时，则编码起名时为冒号分割的方式起名，如:system:user:add、system:menu:del</el-row>
        <el-row class="m-b-5">3.目录、菜单、功能、子页面起名方式不是必须，但必须全局唯一</el-row>
        <el-row>4.<span class="c-red">编码</span>是后台权限判断依据，不要随便修改，如果要修改请查看后台代码哪里用此<span class="c-red">编码</span>做权限验证</el-row>
      </template>
    </el-alert>
    <el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="p-r-20">
      <el-form-item label="上一级">
        <el-tree-select :data="menus"
                        :props="defaultProps"
                        v-model="selectMenu"
                        check-strictly
                        :clearable="true"
                        :render-after-expand="false" />
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio :value="1">目录</el-radio>
          <el-radio :value="2">菜单</el-radio>
          <el-radio :value="4">子页面</el-radio>
          <el-radio :value="3">功能</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="编码" prop="code">
        <el-input v-model="form.code" maxlength="100" show-word-limit />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" maxlength="100" show-word-limit />
      </el-form-item>
      <el-row>
        <el-col :span="10">
          <el-form-item label="顺序">
            <el-input-number v-model="form.seq" :min="1" :max="999999" />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-checkbox v-model="form.show" label="是否显示" :true-value="1" :false-value="0" v-if="form.type==1 || form.type==2 || form.type==4" />
        </el-col>
      </el-row>
      <el-row v-if="form.type==1 || form.type==2 || form.type==4">
        <el-col :span="16">
          <el-form-item label="图标">
            <el-input v-model="form.icon" readonly>
              <template #prefix>
                <span class="iconfont" :class="[form.icon]" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="p-l-10">
          <el-button type="primary" link @click="selectIcon">
            选择图标 <span class="iconfont iaiai-arrow-down hand-cursor" />
          </el-button>
        </el-col>
      </el-row>
      <el-form-item prop="url" label="url地址" v-if="form.type==2 || form.type==4">
        <el-input v-model="form.url" maxlength="300" show-word-limit placeholder="以'/'开头" />
      </el-form-item>
      <el-form-item prop="filePath" label="文件地址" v-if="form.type==2 || form.type==4">
        <el-input v-model="form.filePath" maxlength="300" show-word-limit placeholder="/views目录下的地址，以'/'开头" />
      </el-form-item>
      <el-form-item label="" v-if="form.type==2 || form.type==4">
        <el-radio-group v-model="form.cache">
          <el-radio :value="1">缓存</el-radio>
          <el-radio :value="0">不缓存</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" maxlength="500" show-word-limit />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="hideComp" style="padding: 0 20px" v-if="!loading">
        <span class="iconfont iaiai-close f20 m-r-5"></span>
        取消
      </el-button>
      <el-button type="primary" style="padding: 0 20px" :loading="loading" @click="add" plain>
        <span class="iconfont iaiai-correct f20 m-r-5" v-if="!loading"></span>
        保存
      </el-button>
    </template>

    <iconPage ref="iconPageComp" @select-icon="onSelectIcon" />
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, defineExpose, defineEmits, inject} from "vue"
import {FormInstance, FormRules} from "element-plus"
import iconPage from '@/components/icon.vue'

const $api = inject('$api')
const $post = inject('$post')
const $toast = inject('$toast')
const emit = defineEmits(['onsuccess'])
const show = ref(false)
const loading = ref(false)
const menus = ref([])
const selectMenu = ref()
const iconPageComp = ref()

const defaultProps = {
  children: 'children',
  label: 'title',
  disabled: true,
  value: 'id',
}

interface RuleForm {
  parentId: number
  type: number
  title: string
  remark: string
  code: string
  url: string
  seq: number
  show: number
  cache: number
  icon: string
  filePath: string
}

const formRef = ref<FormInstance>()
const form = ref({
  type: 1,
  parentId: null,
  title: "",
  remark: "",
  code: "",
  url: "",
  seq: 1,
  show: 1,
  cache: 1,
  icon: "",
  filePath: "",
})

const rules = ref<FormRules<RuleForm>>({
  code: [
    { required: true, message: '编码不允许为空', trigger: 'blur' },
  ],
  title: [
    { required: true, message: '标题不允许为空', trigger: 'blur' },
  ],
  url: [
    { required: true, message: 'url地址不允许为空', trigger: 'blur' },
  ],
  filePath: [
    { required: true, message: '文件地址不允许为空', trigger: 'blur' },
  ],
})

function add(){
  formRef.value.validate((valid, fields) => {
    if (valid) {
      form.value.parentId = selectMenu.value
      loading.value = true

      $post($api.menuAdd,form.value).then((res:any)=>{
        loading.value = false
        show.value = false
        emit('onsuccess')
        $toast.success('保存成功')
      }).catch((err:any)=>{
        loading.value = false
      })
    }
  })
}

function showComp(node:any){
  form.value.parentId = node?.data.id
  form.value.type = 1
  form.value.title = ""
  form.value.remark = ""
  form.value.code = ""
  form.value.url = ""
  form.value.seq = 1
  form.value.show = 1
  form.value.cache = 1
  form.value.icon = ""
  form.value.filePath = ""

  selectMenu.value = node?.data.id

  show.value = true

  $post($api.menuTree).then((res:any)=>{
    menus.value = res.data.result.menus
  })
}
function hideComp(){
  show.value = false
}

//选择图标
function selectIcon(){
  iconPageComp.value.showComp()
}

//选择图标
function onSelectIcon(icon:string){
  form.value.icon = "iaiai-"+icon
}

defineExpose({
  showComp,
})
</script>

<style lang="scss" scoped>

</style>
